<!DOCTYPE html>
<head>
    <title>登入</title>
    <#include "/common/include_header.ftl">
</head>
<body>

    <#include "/common/include_top.ftl">

<div class="layui-container fly-marginTop fly-user-main">

    <#include "/common/include_menu.ftl">

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>


    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title" id="LAY_mine">
                <li class="layui-this" lay-id="info">我的资料</li>
                <li lay-id="avatar">头像</li>
                <li lay-id="pass">密码</li>
                <!-- <li lay-id="bind">帐号绑定</li> -->
            </ul>
            <div class="layui-tab-content" style="padding: 20px 0;">
                <div class="layui-form layui-form-pane layui-tab-item layui-show">
                <#--<form method="post" action="/user/set/${user.id}">-->
                    <div class="layui-form-item">
                        <label for="email" class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input value="${user.email}" disabled="true" id="email" name="email" type="text" required
                                   lay-verify="email" autocomplete="off" class="layui-input">
                        </div>
                    <#--<div class="layui-form-mid layui-word-aux">如果您在邮箱已激活的情况下，变更了邮箱，需<a href="activate.html" style="font-size: 12px; color: #4f99cf;">重新验证邮箱</a>。</div>-->
                    </div>
                    <div class="layui-form-item">
                        <label for="uname" class="layui-form-label">昵称</label>
                        <div class="layui-input-inline">
                            <input value="${user.uname}" type="text" id="uname" name="uname" required
                                   lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    <#--<div class="layui-inline">-->
                    <#--<div class="layui-input-inline">-->
                    <#--<input type="radio" name="sex" value="0" checked title="男">-->
                    <#--<input type="radio" name="sex" value="1" title="女">-->
                    <#--</div>-->
                    <#--</div>-->
                    </div>
                    <div class="layui-form-item">
                        <label for="city" class="layui-form-label">城市</label>
                        <div class="layui-input-inline">
                            <input type="text" id="city" name="city" autocomplete="off" value="${user.city}"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label for="sign" class="layui-form-label">签名</label>
                        <div class="layui-input-block">
                            <textarea placeholder="随便写些什么刷下存在感" id="sign" name="sign" autocomplete="off"
                                      class="layui-textarea" style="height: 80px;">${user.sign}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button onclick="doSetBase()" class="layui-btn" key="set-mine" lay-filter="*">确认修改</button>
                    </div>
                </div>
                <script>
                    function doSetBase() {
                        var uname = $("#uname").val();
                        var city = $("#city").val();
                        var sign = $("#sign").val();

                        $.ajax({
                            url: 'setBase',
                            type: 'post',
                            dataType: 'json',
                            data: {
                                uname: uname,
                                city: city,
                                sign: sign
                            },
                            success: function (rd) {
                                if (rd.suc) {
                                    layer.msg(rd.msg, {icon: 1});
                                    delayURL("${basePath}/user/set", 1000);
                                } else {
                                    layer.msg(rd.msg, {icon: 2});
                                }
                            }
                        })
                    }

                    function doSetPwd() {
                        var oldPwd = $("#oldPwd").val();
                        var pwd = $("#pwd").val();
                        var rePwd = $("#rePwd").val();

                        if (hasNull3(oldPwd, pwd, rePwd)) {
                            layer.msg('数据不能为空', {icon: 2});
                        } else if (pwd != rePwd) {
                            layer.msg("两次密码不一样", {icon: 2});
                        } else if (pwd.length < 6 || pwd.length > 16) {
                            layer.msg('密码长度不合理', {icon: 2});
                            $("#pwd").focus();
                        } else {
                            $.ajax({
                                url: 'setPwd',
                                type: 'post',
                                dataType: 'json',
                                data: {
                                    oldPwd: oldPwd,
                                    pwd: pwd
                                },
                                success: function (rd) {
                                    if (rd.suc) {
                                        layer.msg(rd.msg, {icon: 1});
                                        delayURL("${basePath}/user/set", 1000);
                                    } else {
                                        layer.msg(rd.msg, {icon: 2});
                                    }
                                }
                            })
                        }
                    }

                </script>

                <div class="layui-form layui-form-pane layui-tab-item">
                    <div class="layui-form-item">
                        <div class="avatar-add">
                            <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                            <input id="uploadBtn" title="上传头像" class="layui-btn"
                                   style="position: relative;top: 24px;left: 125px;width: 120px;">
                            <i style=" width: 88px;position: relative;left: 20px; top: 25px;"
                               class="layui-icon">&#xe67c;上传头像</i>
                            </input>


                        <#if user.icon??>
                            <img id="icon" src="${user.icon}">
                        <#else>
                        <#--<img src="/static/images/icon/5af009c89e0e29e144c3ea36.jpg">-->
                            <img id="icon" src="/static/images/icon_def.png">
                        </#if>

                            <span class="loading"></span>


                        </div>
                    </div>
                </div>

                <script>

                    function uploadCallBack(rd) {

                        $("#icon").attr('src', rd.data);
                        $("#top_icon").attr('src', rd.data);

                        $.ajax({
                            url: 'setIcon',
                            type: 'post',
                            dataType: 'json',
                            data: {
                                icon: rd.data

                            },
                            success: function (rdd) {
                                console.log(rdd);
                                if (rdd.suc) {
                                    // layer.msg(rd.msg, {icon: 1});
                                } else {
                                    // layer.msg(rd.msg, {icon: 2});
                                }
                            }
                        });
                    }

                </script>
                <div class="layui-form layui-form-pane layui-tab-item">
                <#--<form action="/user/repass" method="post">-->
                    <div class="layui-form-item">
                        <label for="oldPwd" class="layui-form-label">当前密码</label>
                        <div class="layui-input-inline">
                            <input type="password" id="oldPwd" name="nowpass" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="pwd" class="layui-form-label">新密码</label>
                        <div class="layui-input-inline">
                            <input type="password" id="pwd" name="pass" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                    </div>
                    <div class="layui-form-item">
                        <label for="rePwd" class="layui-form-label">确认密码</label>
                        <div class="layui-input-inline">
                            <input type="password" id="rePwd" name="repass" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button onclick="doSetPwd()" class="layui-btn" key="set-mine" lay-filter="*">确认修改</button>
                    </div>
                <#--</form>-->
                </div>


            </div>

        </div>
    </div>
</div>
</div>
<#include "/common/include_js.ftl">
<#include "/common/include_footer.ftl">
</body>
</html>